<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>盒子模型</title>
    	<style>
			*{margin:0px; padding:0px;}
        	.fu{
				width:400px;
				height:100px;
				background:#abcdef;
				}
			.zi{
				width:200px;
				height:50px;
				background:red;
				}
			.fuxiong{
				width:100px;
				height:20px;
				background:#000;
				}
			.gr{
				width:100px;
				height:20px;
				background:green;
				}
        	.sp1{
				width:100px;
				height:20px;
				border:1px solid #000;
				}
        </style>
    </head>
    
    <body>
    	<div class="fuxiong">
        </div>
    	<div class="fu">
        	
        	<div class="zi"></div>
        </div>
        <hr/>
        <div class="gr"></div>
        <span class="sp1"></span>
        <i>斜体标签里的内容</i>
        
        
        
       <!-- 要点：
        1.padding指的是内容到边框的距离，单独取某一个方向时就可以直接设置该方向的padding值，如要设置左内边距 padding-left：20px； 如果要设置多个方向时，直接用padding，取值取一个，表示4个方向都一样，取多个时，是按照上右下左顺时针取值，没有值的和对边相同。
        2.padding值会改变盒子的实际宽度和高度，视觉效果是盒子变大了
        3.如果需要加padding值之后盒子的大小不变，加box-sizing:border-box;
        4. padding值不能为负值
        5.写样式之前先写通配符，把内外边距都设为0px
        6.margin指的是盒子到盒子之间的距离，单独取某一个方向时就可以直接设置该方向的margin值，如要设置左内边距 margin-left：20px； 如果要设置多个方向时，直接用margin，取值取一个，表示4个方向都一样，取多个时，是按照上右下左顺时针取值，没有值的和对边相
        7.块级标签要在页面居中，设置盒子的宽度，同时把左右的margin值设为auto
        8.margin可以是负值,写在自己身上
        9.margin值在垂直方面有合并（条件是无遮挡）盒子间的空白距离是垂直margin值中的较大值，在水平方向不合并，如要垂直方向要不合并那就在盒子之间加遮挡（文字内容 标签 padding）
        10.标准文档流展示指的是浏览器上的显示和编辑器上写的html的顺序一样,浮动和定位会导致标签脱离标准文档流
        11.inline-block行内块级  以内容为限占位置，可以和行内、行内块级同排显示，设置的宽高可以生效，默认有间距
        12.display可以用于控制元素的显示和隐藏，还可以控制块级，行内块级，行内之间的相互转化
        -->
        
    </body>
</html>
